<template>
    <div class="container">
        <FormList ref="formRef" :formList="editAddList" :num="24" :gutter="24" layout="horizontal" :btnSpan="18"
            :showResetBtn="false" btnTitle="保存" :labelCol="4" :wrapperCol="12" :btnWarpSpan="14" :btnWarpOffset="4"
            @Search="editForm" />
    </div>
</template>
  
<script setup>
import { ref } from "vue";
import { getList, edit } from "@/api/system";
import { reactive } from "vue";
import { message } from "ant-design-vue";
const props = defineProps({
    type: String
})
const formRef = ref();
const state = reactive({
    formData: {},
});

var editAddList = reactive([
    {
        type: "input", //类型
        label: "微信小程序appid", //标签
        name: "mini_appid", //字段
        rules: [{ required: true, message: "请输入" }], //规则
        formProps: {}, //form的props
        itemProps: {}, //item的props
    },
    {
        type: "input", //类型
        label: "微信小程序secret", //标签
        name: "mini_secret", //字段
        rules: [{ required: true, message: "请输入" }], //规则
        formProps: {}, //form的props
        itemProps: {}, //item的props
    }
]);

// 获取列表
const getData = () => {
    getList({
        s_group: props.type
    }).then((res) => {
        if (res.code == 0) {
            const data = res.data;
            state.formData = data;
            let obj = {}
            data.map(item => {
                obj[item.s_key] = item.s_value
            })
            formRef.value.resetForm({
                ...obj
            });
        }
    });
};

// 保存
const editForm = (values) => {
    let params = state.formData.map(item => {
        for (let key in values) {
            if (key === item.s_key) {
                return {
                    s_key: key,
                    s_value: values[key]
                }

            }
        }
    })
    edit({
        edit_data: params
    }).then((res) => {
        if (res.code == 0) {
            message.success(res.msg);
            getData();
        }
    });
};

getData();
</script>
  
<style scoped lang="scss">
.container {
    display: flex;
    justify-content: center;
    height: 100%;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}
</style>
  